// import React from 'react'
// import ReactDOM from 'react-dom/client'
// import App from './App'
// import './index.css'

// ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// )
// import { createElement } from 'react'
import diff from './diff'
import patch from './patch'
import { createElement, render, renderDOM } from './element'

// 跳过JSX -> 编译过程
{/* <ul className="list">
  <li className="item">周杰伦</li>
  <li className="item">王俊杰</li>
  <li className="item">王力宏</li>
</ul> */}
let virtualDOM = createElement('ul', {class: 'list', value: 2}, [
  createElement('li', {class: 'item'}, ['周杰伦']),
  createElement('li', {class: 'item'}, ['王俊杰']),
  createElement('li', {class: 'item'}, ['王力宏']),
])
let virtualDOM2 = createElement('ul', {class: 'list-group'}, [
  createElement('li', {class: 'item'}, ['周杰']),
  createElement('li', {class: 'item'}, ['王俊凯']),
  createElement('li', {class: 'item', value: 'wlh'}, ['王力宏']),
  createElement('li', {class: 'item'}, ['阿妹']),
])
// b比较两颗DOM树
// console.log(virtualDOM)
let el = render(virtualDOM); // 渲染 内存中 document.createElement(tag)
console.log(el)
// Element树  -> Tag树
renderDOM(el, document.getElementById('root'))
let patchs = diff(virtualDOM, virtualDOM2)
// 生成新的 DOM
console.log(patchs)
// 去旧的虚拟DOM上打补丁
patch(el, patchs)
const App = () => {
  return (
    <div>app</div>
  )
}
export default App